@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {

    /* 自定义工具 上下浮动效果 */
    .animate-floatY {
        animation: floatY 3s ease-in-out infinite;
    }

    @keyframes floatY {
        0% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-20px);
        }

        100% {
            transform: translateY(0px);
        }
    }


    /* 自定义工具 左右浮动效果 */
    .animate-floatX {
        animation: floatX 3s ease-in-out infinite;
    }

    @keyframes floatX {
        0% {
            transform: translateX(0px);
        }

        50% {
            transform: translateX(-20px);
        }

        100% {
            transform: translateX(0px);
        }
    }

}